<template>
  <div class="page-container">
    <HomeNavi />
    <div class="carousel-container">
      <el-carousel
        :interval="5000"
        height="98vh"
        arrow="always"
        autoplay="true"
      >
        <DownCircleOutlined
          style="
            position: absolute;
            bottom: 10%;
            color: white;
            font-size: 40px;
            bottom: 2%;
            right: 1%;
          "
          @click="scrollToContent1"
        />
        <el-carousel-item>
          <img
            src="@/assets/homepage1.png"
            alt="Image 1"
            class="carousel-image"
          />
          <div class="left-text">
            <p class="title">对话式AI数据分析</p>
            <p class="subtitle">“0门槛”构建个性化数据分析模型和指标体系</p>
            <p class="subtitle">
              为决策分析提供有力数据支撑，助力全面释放数据价值。
            </p>
            <router-link to="/conversation">
              <el-button type="primary" size="large" class="white-button"
                >立即使用</el-button
              >
            </router-link>
            <el-button
              type="primary"
              size="large"
              class="blue-button"
              @click="scrollToContent1"
              >了解更多</el-button
            >
          </div>
        </el-carousel-item>

        <el-carousel-item>
          <img
            src="@/assets/homepage2.png"
            alt="Image 1"
            class="carousel-image"
          />
          <div class="left-text">
            <p class="title">AI智能洞察引擎</p>
            <p class="subtitle">自动发现业务数据中存在的问题并预测发展趋势</p>
            <p class="subtitle">
              洞察行业动态，预测市场走向。敏锐捕捉异常，及时预警风险
            </p>
            <router-link to="/conversation">
              <el-button type="primary" size="large" class="white-button"
                >立即使用</el-button
              >
            </router-link>
            <el-button
              type="primary"
              size="large"
              class="blue-button"
              @click="scrollToContent2"
              >了解更多</el-button
            >
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div ref="content1" class="content1">
      <DownCircleOutlined
        style="
          position: absolute;
          bottom: 10%;
          color: black;
          font-size: 40px;
          bottom: 2%;
          right: 1%;
          z-index: 10;
        "
        @click="scrollToContent2"
      />

      <div class="left-text">
        <p ref="content1Title" class="title">懂数据、懂业务的AI数据分析师</p>
        <p ref="content1Subtitle" class="subtitle">
          由对话驱动的数据分析，快速创建业务报表、大屏，进行自主的探索式分析。
        </p>
        <p ref="content1Subtitle2" class="subtitle">
          通过对话式界面快速获取所需的数据，平均5秒即可完成，显著提高数据分析效率。
        </p>
        <div style="display: flex; flex-direction: column">
          <div
            @click="currentSVG = 3"
            :class="{ active: currentSVG === 3 }"
            class="clickable-div"
          >
            <p style="font-size: 1.4vw; margin-bottom: 0px; font-weight: 500">
              对话式数据分析
            </p>
            <p style="font-size: 1.2vw; margin-bottom: 10px; margin-top: 20px">
              用户仅需告诉ChatBI想要了解的数据，模型即刻生成代码进行分析、计算。
            </p>
          </div>
          <div
            @click="currentSVG = 1"
            :class="{ active: currentSVG === 1 }"
            class="clickable-div"
          >
            <p style="font-size: 1.4vw; margin-bottom: 0px; font-weight: 500">
              自动数据可视化
            </p>
            <p style="font-size: 1.2vw; margin-bottom: 10px; margin-top: 20px">
              结合数据，智能生成可交互式图表，并支持50余种图表类型，满足多样化需求
            </p>
          </div>
          <div
            @click="currentSVG = 2"
            :class="{ active: currentSVG === 2 }"
            class="clickable-div"
          >
            <p style="font-size: 1.4vw; margin-bottom: 0px; font-weight: 500">
              智能业务解析
            </p>
            <p style="font-size: 1.2vw; margin-bottom: 10px; margin-top: 20px">
              结合专业领域知识，给出专业的业务行动指引意见，及时发现异常、预警风险。
            </p>
          </div>
        </div>
      </div>

      <div
        v-if="currentSVG === 1"
        class="svg-container animate__animated animate__fadeInUp"
      >
        <Content1SVG class="content1SVG" />
      </div>

      <div
        v-if="currentSVG === 2"
        class="svg-container animate__animated animate__fadeInUp"
      >
        <Content2SVG class="content1SVG" />
      </div>

      <div
        v-if="currentSVG === 3"
        class="svg-container animate__animated animate__fadeInUp"
      >
        <Content3SVG class="content1SVG" />
      </div>

      <WaveAnimation class="wave" />
    </div>

    <div ref="content2" class="content2">
      <p class="title">AI智能洞察引擎</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";
import HomeNavi from "../components/home/HomeNavi.vue";
import WaveAnimation from "../components/home/WaveAnimation.vue";
import Content1SVG from "../components/home/Content1SVG.vue";
import Content2SVG from "../components/home/Content2SVG.vue";
import Content3SVG from "../components/home/Content3SVG.vue";
import { DownCircleOutlined } from "@ant-design/icons-vue";
import "animate.css";

const content1 = ref(null);
const content1Title = ref(null);
const content1Subtitle = ref(null);
const content1Subtitle2 = ref(null);
const content1SVG = ref(null);
const content2 = ref(null);
const currentSVG = ref(3);

const scrollToContent1 = () => {
  content1.value.scrollIntoView({ behavior: "smooth" });
};

const scrollToContent2 = () => {
  content2.value.scrollIntoView({ behavior: "smooth" });
};

onMounted(() => {
  nextTick(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add(
              "animate__animated",
              "animate__fadeInUp",
              "animate__slow"
            );
          }
        });
      },
      { threshold: 0.1 }
    );

    if (content1Title.value) observer.observe(content1Title.value);
    if (content1Subtitle.value) observer.observe(content1Subtitle.value);
    if (content1Subtitle2.value) observer.observe(content1Subtitle2.value);
    if (content1SVG.value) observer.observe(content1SVG.value);
  });
});
</script>

<style scoped>
@import "animate.css";

.page-container {
  overflow-y: auto;
}

.carousel-container {
  height: 98vh;
  position: relative;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.left-text {
  position: absolute;
  left: 7%;
  top: 30%;
  color: #ffffff;
  opacity: 0.9;
  text-align: left;
  font-size: 3.2vw;
}

.left-text .title {
  font-size: 4.8vw;
  font-weight: 750;
}

.left-text .subtitle {
  font-size: 1.8vw;
  margin-bottom: 5px;
  color: #f2f2f2;
}

.content1 .left-text .subtitle {
  font-size: 1.8vw;
  margin-bottom: 5px;
  color: #5e5e5e;
}

.left-text .subtitle2 {
  font-size: 21px;
  color: blue;
}

.blue-button {
  background-color: transparent !important;
  color: #ffffff;
  border-color: #ffffff;
  margin-top: 50px;
  margin-right: 10%;
  border-radius: 50px;
  font-size: 20px;
  font-weight: 700;
  height: 50px;
  width: 150px;
}

.white-button {
  background-color: #ffffff;
  color: #000000;
  border-color: #ffffff;
  margin-top: 50px;
  margin-right: 10%;
  border-radius: 50px;
  font-size: 20px;
  font-weight: 700;
  height: 50px;
  width: 150px;
}

.content1 {
  height: 100vh;
  position: relative;
  background-color: #cfe4fb;
  color: #000000;
}

.content1SVG {
  position: absolute;
  right: 0;
}

.content1 .left-text {
  color: #000000;
  top: 15%;
}

.content1 .left-text .title {
  color: #072b53;
}

.wave {
  bottom: 0px;
}
.content2 {
  height: 100vh;
  position: relative;
  background-color: #ffffff;
}

.left-text .clickable-div {
  width: 75%;
  height: 100px;
  display: inline-block;
  margin-top: 30px;
  margin-right: 10px;
  padding: 10px 20px;
  cursor: pointer;
  background-color: #eeeeee2e;
  border-radius: 8px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
    sans-serif;
  font-weight: normal;
  color: rgb(34, 34, 34);
  font-size: 15vw;
  line-height: 24px;
  box-sizing: border-box;
  transition: 0.2s ease;
  border: 1px solid rgba(200, 200, 200, 0.415);
}

.left-text .clickable-div.active {
  background-color: #ffffff;
  color: rgb(23, 120, 255);
  border-bottom: 8px solid #2155ff;
}

.left-text .clickable-div:hover {
  border-color: #409eff;
}
</style>
